<template>
  <div>
    <headline :headline="'商品属性'" />
    <el-form ref="ruleForm" class="form" :model="goodsInfo" label-width="150px" size="mini" label-position="left">
      <el-row :gutter="gutter">
        <el-col :span="span" :xl="xl">
          <el-form-item label="运输方式" prop="transportMode" :rules="{ required: true, message: '请输入运输方式', trigger: 'blur' }">
            <el-select v-model="goodsInfo.transportMode" placeholder="请选择运输方式" :disabled="isDisabled" clearable>
              <el-option v-for="item in transportType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-popover placement="bottom" trigger="click">
              <transport />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="搜索词" prop="keyword" :rules="{ required: true, validator: validator, trigger: 'blur' }">
            <el-input v-model="goodsInfo.keyword" :disabled="isDisabled" placeholder="请输入搜索词,多个以逗号隔开" maxlength="64" show-word-limit clearable />
            <el-popover placement="bottom" trigger="click">
              <searchTerm />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>

        <el-col :span="span" :xl="xl">
          <el-form-item label="是否进口" prop="importFlag" :rules="{ required: true, message: '请选择是否进口', trigger: 'blur' }">
            <el-radio-group v-model="goodsInfo.importFlag" :disabled="isDisabled">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <el-popover placement="bottom" trigger="click">
              <entrance />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="是否液体" prop="liquidFlag" :rules="{ required: false, message: '请选择是否液体', trigger: 'blur' }">
            <el-radio-group v-model="goodsInfo.liquidFlag" :disabled="isDisabled">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="是否贵重" prop="valuablesFlag" :rules="{ required: false, message: '请选择是否贵重', trigger: 'blur' }">
            <el-radio-group v-model="goodsInfo.valuablesFlag" :disabled="isDisabled">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="是否易碎" prop="fragileFlag" :rules="{ required: false, message: '请选择是否易碎', trigger: 'blur' }">
            <el-radio-group v-model="goodsInfo.fragileFlag" :disabled="isDisabled">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="span" :xl="xl">
          <el-form-item label="是否带赠品" prop="giveawayFlag" :rules="{ required: false, message: '请选择是否带赠品', trigger: 'blur' }">
            <el-radio-group v-model="goodsInfo.giveawayFlag" :disabled="isDisabled" @input="giveawayFlagInput">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <el-popover placement="bottom" trigger="click">
              <gift />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col v-if="goodsInfo.giveawayFlag == 1" :span="span" :xl="xl">
          <el-form-item
            label="赠品失效日期"
            prop="giveawayExpiryDate"
            :rules="{ required: goodsInfo.giveawayFlag, message: '请选择赠品的失效日期', trigger: 'blur' }"
          >
            <span class="flex">
              <el-date-picker
                v-model="goodsInfo.giveawayEffectiveDate"
                :disabled="!(fromPage === 'commodityLibrary')"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
              <el-date-picker
                v-model="goodsInfo.giveawayExpiryDate"
                :disabled="isDisabled"
                clearable
                style="margin-left: 10px"
                value-format="yyyy-MM-dd"
                type="date"
                :picker-options="pickerOptions"
                placeholder="选择日期"
              />
            </span>
          </el-form-item>
        </el-col>
        <el-col v-if="fromPage === 'commodityLibrary'" :span="span" :xl="xl">
          <el-form-item label="存储方式" prop="warmZoneLabel" :rules="{ required: false, message: '请选择存储方式', trigger: 'blur' }">
            <el-select v-model="goodsInfo.warmZoneLabel" :disabled="isDisabled" clearable placeholder="请选择存储方式">
              <el-option v-for="op in warmZoneLabel" :key="op.value" :label="op.label" :value="op.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="保质期管理" prop="shelfLifeMgmtFlag">
            <el-radio-group v-model="goodsInfo.shelfLifeMgmtFlag" :disabled="isDisabled">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="goodsInfo.shelfLifeMgmtFlag == 1" :span="span" :xl="xl">
          <el-form-item label="保质期" prop="shelfLife" :rules="{ required: goodsInfo.shelfLifeMgmtFlag, message: '请填写保质期', trigger: 'blur' }">
            <el-input v-model="goodsInfo.shelfLife" :disabled="isDisabled" clearable @input="shelfLifeChange">
              <span slot="suffix" class="suffix">天</span>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col v-if="fromPage === 'commodityLibrary'" :span="span" :xl="xl">
          <el-form-item label="溢价" prop="premiumPrice" :rules="{ required: true, message: '请输入溢价', trigger: 'blur' }">
            <el-input v-model="goodsInfo.premiumPrice" :disabled="isDisabled" clearable placeholder="请输入溢价" />
          </el-form-item>
        </el-col>
        <!-- todo -->
        <el-col v-if="isDropshipping || fromPage === 'CBEC'" :span="span" :xl="xl">
          <el-form-item label="业务类型" prop="goodsTypeName" :rules="{ required: false, message: '请输入商品类型', trigger: 'blur' }">
            <el-input v-model="goodsInfo.goodsTypeName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>

        <el-col v-if="isDropshipping" :span="span" :xl="xl">
          <el-form-item label="供应商SKU ID" prop="outSkuId" :rules="{ required: false, message: '请输入供应商SKU ID', trigger: 'blur' }">
            <el-input v-model="goodsInfo.outSkuId" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>

        <el-col v-if="isDropshipping" :span="span" :xl="xl">
          <el-form-item label="供应商可售状态" prop="saleStatusName" :rules="{ required: false, message: '请输入供应商可售状态', trigger: 'blur' }">
            <el-input v-model="goodsInfo.saleStatusName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>

        <el-col v-if="isDropshipping" :span="span" :xl="xl">
          <el-form-item label="退货类型" prop="returnTypeName" :rules="{ required: false, message: '请输入退货类型', trigger: 'blur' }">
            <el-input v-model="goodsInfo.returnTypeName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>

        <el-col v-if="isDropshipping" :span="span" :xl="xl">
          <el-form-item label=" 退货文案" prop="returnDescTypeName" :rules="{ required: false, message: '请输入退货文案', trigger: 'blur' }">
            <el-input v-model="goodsInfo.returnDescTypeName" disabled clearable placeholder=" " />
          </el-form-item>
        </el-col>

        <channelAttribute
          v-for="(item, index) in channelAttributeList"
          :key="index"
          :commodity-attribute="item"
          key-name="channelAttributeList"
          :span="span"
          :xl="xl"
          :is-disabled="isDisabled"
        />
      </el-row>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
import headline from '@/views/coi/components/headline.vue'
import transport from '../schedule/components/fieldPrompt/transport'
import entrance from '../schedule/components/fieldPrompt/entrance'
import searchTerm from '../schedule/components/fieldPrompt/searchTerm'
import gift from '../schedule/components/fieldPrompt/gift'
import { warmZoneLabel, transportType } from '@/views/coi/commonJs/dictionary'
import channelAttribute from '@/views/coi/components/channelAttribute'

export default {
  components: {
    headline,
    transport,
    entrance,
    searchTerm,
    gift,
    channelAttribute
  },
  props: {
    goodsInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    channelAttributeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    fromPage: {
      type: String,
      default: 'making'
    },
    gutter: {
      type: Number,
      default: 80
    },
    span: {
      type: Number,
      default: 12
    },
    xl: {
      type: Number,
      default: 8
    }
  },
  data() {
    return {
      warmZoneLabel: warmZoneLabel,
      transportType: transportType,
      whether: [
        { attrValueName: '是', attrValueId: 1 },
        { attrValueName: '否', attrValueId: 0 }
      ],
      whether0: [
        { label: '是', value: 1 },
        { label: '否', value: 0 }
      ],
      pickerOptions: {
        disabledDate(time) {
          //  // 8.64e7
          //  //  return time.getTime() < Date.now() - 8.64e7; //只能选择今天及今天之后
          //   // return time.getTime() > Date.now() - 8.64e7; //只能选择今天之前，连今天都不能选
          return time.getTime() < Date.now() - 8.64e6 // 只能选择今天之后，连今天都不能选
          //   // return time.getTime() > Date.now() - 8.64e6; //只能选择今天及今天之前
          //   }
        }
      },
      validator: (rule, value, callback) => {
        if (!value) callback(new Error('请输入搜索词'))
        else if (this.getCharCount(value, ',') > 4 || this.getCharCount(value, '，') > 4) callback(new Error('搜索词最多可编辑5个'))
        else callback()
      },
      count: 0
    }
  },
  computed: {
    // DROPSHIPPING
    isDropshipping() {
      return this.goodsInfo && this.goodsInfo.goodsType === 'DROPSHIPPING'
    }
  },
  watch: {
    goodsInfo: {
      handler(newValue) {
        if (this.count > 0 && this.fromPage === 'commodityLibrary') {
          this.$parent.operationCode[0] = 100
        }
        this.count++
      },
      deep: true
    }
  },
  methods: {
    giveawayFlagInput(v){
      if (v && !this.goodsInfo.giveawayEffectiveDate) this.goodsInfo.giveawayEffectiveDate = moment(new Date()).format('YYYY-MM-DD')
    },
    getCharCount(str, char) {
      var regex = new RegExp(char, 'g')
      var result = str.match(regex)
      var count = !result ? 0 : result.length
      return count
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    },
    shelfLifeChange(e) {
      this.goodsInfo.shelfLife = e.match(/^\d*(\.?\d{0,1})/g)[0] || null
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  margin: 0 10px;
  margin-top: 20px;
}

/deep/ .el-select {
  width: 100% !important;
}
/deep/.el-date-editor {
  width: 100% !important;
}
.flex {
  display: flex;
  justify-items: space-between;
}
/deep/ .el-col-12 {
  height: 48px;
}
/deep/ .suffix {
  margin-right: 10px;
}
/deep/ .el-form-item__content {
  display: flex;
  align-items: center;
}
.el-icon-question {
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
}
/deep/ .el-radio {
  line-height: 28px;
}
</style>
